<meta name="csrf-token" content="{{ csrf_token() }}">
<!--本项目使用了Echarts图表工具，详情参见ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization
Deqing Li, Honghui Mei, Yi Shen, Shuang Su, Wenli Zhang, Junting Wang, Ming Zu, Wei Chen.
Visual Informatics, 2018-->
<style type="text/css">
    #chart_container div {
        font-family: "微软雅黑";
        font-size: 25px;
    }

    .box-body{
        padding:20px;
    }
</style>
<script type="text/javascript">
    $(document).ready(function(){

    });
</script>


<div id="page-wrapper">
<!-- JavaScripts -->
    <script src="{{URL::asset('js/echarts.js')}}"></script>
    <script src="{{URL::asset('js/html2canvas.js')}}"></script>
    <script src="{{URL::asset('js/jspdf.min.js')}}"></script>
    <script type="text/javascript">
        var urlArr=[];
        var radarArr = [];
        function o_window(){
            var wi = window.open('about:blank', '_blank');

            wi.document.write(document.getElementById('chart_container').outerHTML);

            var style = wi.document.createElement("style");
            style.innerHTML = '.box-body {\n' +
                '    border-top-left-radius: 0;\n' +
                '    border-top-right-radius: 0;\n' +
                '    border-bottom-right-radius: 3px;\n' +
                '    border-bottom-left-radius: 3px;\n' +
                '    padding: 20px;\n' +
                '}\n' +
                '.box {\n' +
                '    position: relative;\n' +
                '    background: #ffffff;\n' +
                '    border-top: 3px solid #d2d6de;\n' +
                '    margin-bottom: 20px;\n' +
                '    box-shadow: 0 1px 1px rgba(0,0,0,0.1);\n' +
                '}';

            wi.document.body.appendChild(style);
            var listnew = wi.document.getElementsByTagName("canvas");
            var listold = document.getElementsByTagName("canvas");
            for(i=0;i<listold.length;i++){
                var ctx = listold[i].getContext('2d');
                var imgdata = ctx.getImageData(0,0,1250,7500
                );
                var ctxnew = listnew[i].getContext('2d');
                ctxnew.putImageData(imgdata,0,0);
            }
            var div1 = wi.document.getElementById("chart_container");
            div1.style.position = 'fixed';
            div1.style.top = '0px';
            div1.style.left = '0px';

            wi.opener.export_pdf(div1);
            setTimeout(function(){
                wi.close();
            },1000);
        }

        function export_pdf(div1){
            var contentWidth = 0;
            var contentHeight = 0;
            var w = parseInt(window.getComputedStyle(div1).width);
            var h = parseInt(window.getComputedStyle(div1).height);
            var canvas1 = document.createElement("canvas");
            //canvas1.getContext("2d").translate(20, 0);
            canvas1.getContext("2d").scale(1, 1);
            canvas1.style.width=w+'px';
            canvas1.style.height=h+'px';
            canvas1.width=w;
            canvas1.height=h;

            html2canvas(div1, {canvas:canvas1,allowTaint:true}).then(function(canvas) {
                contentWidth = canvas.width;
                contentHeight = canvas.height;
                //一页pdf显示html页面生成的canvas高度;
                var pageHeight = contentWidth / 592.28 * 841.89;
                //未生成pdf的html页面高度
                var leftHeight = contentHeight;
                //页面偏移
                var position = 0;
                //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                var imgWidth = 595.28;
                var imgHeight = 584 / contentWidth * contentHeight;
                //canvas.getContext("2d").translate(-500,-20);
                var pageData = canvas.toDataURL('image/jpeg', 0.95);
                //console.log(pageData);
                //注①
                var pdf = new jsPDF('', 'pt', 'a4');
                //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                //当内容未超过pdf一页显示的范围，无需分页
                if (leftHeight < pageHeight) {
                    pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
                } else {
                    while (leftHeight > 0) {
                        //arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
                        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                        leftHeight -= pageHeight;
                        position -= 841.89;
                        //避免添加空白页
                        if (leftHeight > 100) {
                            //注②
                            pdf.addPage();
                        }
                    }
                }

                var student = $('#student').val();
                pdf.save(student+'.pdf');
            });
        }


        //导出PDF
        /*$('#btn_pdf').on("click",null,function(){
            window.scrollTo(0,0);
            console.log(window.screen.height);
            //评语填充
            //先找到chart_container的最后一个子节点
            var div_list = $('#chart_container').children("div:last-child");
            //找到子节点下面的子节点，即存放图的div
            var children_list = div_list.children();

            //填充用的600pxdiv没有图的话，文字放到这里，否则放到页末300px的div
            var child = $(children_list[2]);
            if(child.find('div').length == 0){
                var str = $('#memo').val();
                child.html(str.replace(/\n/g,'<br />'));
                child.css('margin','auto');
            }else{
                child = $(children_list[3]);
                var str = $('#memo').val();
                child.html(str.replace(/\n/g,'<br />'));
                child.css('margin','auto');
            };

            var dom1 = document.getElementById('chart_container');
            var contentWidth = 0;
            var contentHeight = 0;

            var w = parseInt(window.getComputedStyle(dom1).width);
            var h = parseInt(window.getComputedStyle(dom1).height);
            var canvas1 = document.createElement("canvas");
            //canvas1.getContext("2d").translate(20, 0);
            canvas1.getContext("2d").scale(1, 1);
            canvas1.style.width=w+'px';
            canvas1.style.height=h+'px';
            canvas1.width=w;
            canvas1.height=h;
            canvas1.getContext("2d").translate(-250, -480);

            html2canvas(dom1, {canvas:canvas1,allowTaint:true}).then(function(canvas) {
                contentWidth = canvas.width;
                contentHeight = canvas.height;
                //一页pdf显示html页面生成的canvas高度;
                var pageHeight = contentWidth / 592.28 * 1000;
                //未生成pdf的html页面高度
                var leftHeight = contentHeight;
                //页面偏移
                var position = 0;
                //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                var imgWidth = 595.28;
                var imgHeight = 585 / contentWidth * contentHeight;
                //canvas.getContext("2d").translate(-500,-20);
                var pageData = canvas.toDataURL('image/jpeg', 0.95);
                //console.log(pageData);
                //注①
                var pdf = new jsPDF('', 'pt', 'a4');
                //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                //当内容未超过pdf一页显示的范围，无需分页
                if(leftHeight < pageHeight) {
                    pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth,imgHeight);
                } else {
                    while(leftHeight > 0) {
                        //arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
                        pdf.addImage(pageData, 'JPEG', 0, position,imgWidth, imgHeight)
                        leftHeight -= pageHeight;
                        position -= 841.89;
                        //避免添加空白页
                        if(leftHeight > 0) {
                            //注②
                            pdf.addPage();
                        }
                    }
                }

                var student = $('#student').find("option:selected").text();

                pdf.save(student+'.pdf');
            });


/!*            urlArr = [];
            var chart_dom = $('#chart_container').children();
            for(c=0;c<chart_dom.length;c++){
                var canvas2 = document.createElement("canvas");
                var _canvas = chart_dom[c];
                var w = 1200;
                var h = parseInt(window.getComputedStyle(_canvas).height);
                //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
                canvas2.width = w * 3;
                canvas2.height = h * 3;
                canvas2.style.width = w + "px";
                canvas2.style.height = h + "px";
                //可以按照自己的需求，对context的参数修改,translate指的是偏移量
                //  var context = canvas.getContext("2d");
                //context.translate(-4,-5);
                var context = canvas2.getContext("2d");
                context.scale(3,3);
                //context.translate(-244,-350);
                html2canvas(_canvas, { canvas: canvas2,scale:3 }).then(function(canvas) {
                    //document.body.appendChild(canvas);
                    //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
                    var url = canvas.toDataURL('image/jpeg');
                    dealImage(url,1500,put_arr);
                });
            }
            setTimeout(function(){
                var doc = new jsPDF('','cm','a4');


                for(i=0;i<urlArr.length;i++){
                    if(i == 0){
                        doc.addImage(urlArr[i],'JPEG',0,0,22.3,29.7);
                    }else{
                        doc.addImage(urlArr[i],'JPEG',0,0,21,29.7);
                    }
                    if(i != urlArr.length -1){
                        doc.addPage();
                    }
                }

                var section = $('#section').find("option:selected").text();
                var group = $('#group').find("option:selected").text();
                var squad = $('#squad').find("option:selected").text();
                var student = $('#student').find("option:selected").text();

                var name = section+'-'+group+'-'+squad+'-'+student;
                doc.save(name+'.pdf');
            },3000);*!/
        });*/


        //添加报表
        $('#btn_submit').on("click",null,function(){
            var chart_type = $('#chart_type').val();
            if($('#startTime').val() == ''){
                alert('请填写开始时间');
                return;
            }
            if($('#endTime').val() == ''){
                alert('请填写结束时间');
                return;
            }
            var chart_type = $('#type').val();

            $('#chart_container').empty();
            var html = '    <div class="box box-body" id="charts-0" style="width:1200px;height:1710px;background:url({{URL::asset("images/report.jpg")}}) no-repeat;background-size:100% 100%;margin-left:0;margin-right:0;padding:0;">\n' +
                '        <div id="info" style="width:200px;height:150px;font-size:24px;margin-left:500px;line-height: 100px;color:white;font-weight: bold"></div>\n' +
                '    </div>';
            $('#chart_container').append(html);

            var data = {};
            data.student=$('#student').attr('student_id');
            data.startTime=$('#startTime').val();
            data.endTime=$('#endTime').val();

            var student = $('#student').val();
            html = '学生：'+student+'&nbsp;';

            $('#info').html(html);

            var margin = false;
            for(t in chart_type){
                if(t % 2 == 1){
                    margin = true;
                }
                data.chart_type = chart_type[t];
                if(chart_type[t] == 1){
                    var id = t;
                    tingxie(data,margin,id);
                    margin = false;
                }else if(chart_type[t] ==2){
                    var id = t;
                    ceyan(data,margin,id);
                    margin = false;
                }else if(chart_type[t] == 3){
                    var id = t;
                    kaoqin(data,margin,id);
                    margin = false;
                }else if(chart_type[t] == 4){
                    var id = t;
                    jiaxiao(data,margin,id);
                    margin = false;
                }else if(chart_type[t] == 5){
                    var id = t;
                    zuoye(data,margin,id);
                    margin = false;
                }else{
                    alert('请选择报表类型');
                    return;
                }

                if(t % 2 == 1){
                    //最后用空div填充
                    var less = $('#chart_container').children().length - 1 ;
                    less = 'charts-'+less;
                    html = '<div style="height:300px"></div>';
                    $('#'+less).append(html);

                    //两张图一页，如果有多余的图，则增加一个div
                    if(t != chart_type.length - 1){
                        var leng = $('#chart_container').children().length;

                        leng = 'charts-'+leng;
                        var html = '<div class="box box-body" style="width:1200px;'+"background:url({{URL::asset('images/report.jpg')}}) no-repeat;background-size:1200px 1700px;margin-left:0;margin-right:0;padding:0;"+'"id="'+leng+'" >'+'<div style="width:1200px;height:150px"></div>'+'</div>';
                        $('#chart_container').append(html);
                    }
                }
                if(t % 2 ==0 && t == chart_type.length -1){
                    //如果是奇数张图，且是结束，要再用一个700px的div填充
                    var less = $('#chart_container').children().length - 1;
                    less = 'charts-'+less;
                    html = '<div style="height:600px;margin-top:50px"></div><div style="height:300px"></div>';
                    $('#'+less).append(html);
                }
            }

        });


        //减去一个报表
/*        $('#btn_minus').on("click",null,function(){
            $('#charts div:last-child').remove();
        });


        //保存为报表
        $('#btn_save').on("click",function(){
            var section = $('#section option:selected').val();

            var group = $('#group option:selected').val();

            var squad = $('#squad option:selected').val();

            var student = $('#student option:selected').val();

            var chart_type = $('#chart_type option:selected').val();

            var start_time = $('#startTime').val();

            var end_time = $('#endTime').val();
        });*/

        //听写
        function tingxie(data,margin=false,id){
            var myid = 'chart-'+id;

            var c_id = 'charts-';
            c_id += Math.floor(id/2);

            var m_style = '';
            if(margin == true){
                m_style = 'margin-top:50px;';
            }
            var html = '<div style="width:1000px;height:600px;margin:auto;'+m_style+'" class="row" id="'+myid+'">';
            $('#'+c_id).append(html);

            $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},async:false});
            $.post('report/get_tingxie_stu',data,function(e){
                if(e.status < 0){
                    alert(e.message);
                }else {
                    var title = e.title;
                    var data = e.data;


                    var dom1 = document.getElementById(myid);
                    var myChart1 = echarts.init(dom1, 'light');

                    option = {
                        title: {
                            text: '听写成绩变化'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: {
                            data: title,
                        },
                        yAxis: {
                            splitLine: {
                                show: false
                            }
                        },
                        visualMap: {
                            top: 10,
                            right: 10,
                            show:false,
                            pieces: [{
                                gt: 0,
                                lte: 60,
                                color: '#096'
                            }, {
                                gt: 60,
                                lte: 70,
                                color: '#ffde33'
                            }, {
                                gt: 70,
                                lte: 80,
                                color: '#ff9933'
                            }, {
                                gt: 80,
                                lte: 90,
                                color: '#cc0033'
                            }, {
                                gt: 90,
                                lte: 100,
                                color: '#660099'
                            }],
                            outOfRange: {
                                color: '#999'
                            }
                        },
                        series: {
                            type: 'line',
                            data: data,
                            label:{
                                normal:{
                                    show:true
                                },
                            },
                            markLine: {
                                silent: true,
                                data: [{
                                    yAxis: 60
                                }, {
                                    yAxis: 70
                                }, {
                                    yAxis: 80
                                }, {
                                    yAxis: 90
                                }, {
                                    yAxis: 100
                                }]
                            }
                        }
                    }
                    if(data.length > 1){
                        option.dataZoom = {startValue:'',type:'slider'};
                    }
                    myChart1.setOption(option);
                }
            });
        }


        //考勤
        function kaoqin(data,margin=false,id){
            var myid = 'chart-'+id;

            var c_id = 'charts-';
            c_id += Math.floor(id/2);

            var m_style = '';
            if(margin == true){
                m_style = 'margin-top:50px;';
            }
            var html = '<div style="width:1000px;height:600px;margin:auto;'+m_style+'" class="row" id="'+myid+'">';

            //var div1 = document.createElement("div");
            //div1.setAttribute("id",myid);
            $('#'+c_id).append(html);

            $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},async:false});
            $.post('report/get_kaoqin_stu',data,function(e){
                var builderJson = e;
                //var memo = e.memo;


                var dom1 = document.getElementById(myid);
                var myChart1 = echarts.init(dom1,'light');

                option = {
                    /*                    backgroundColor: {
                                            type: "pattern",
                                            repeat: "repeat",
                                            image: fullImage,
                                        },*/
                    tooltip: {},
                    title: [{
                        text: '个人考勤次数',
                        subtext: '总计 ' + Object.keys(builderJson).reduce(function (all, key) {
                            return all + builderJson[key];
                        }, 0),
                        subtextStyle:{
                            fontSize:18
                        },
                        textStyle:{
                            fontSize:20
                        },
                        x: '25%',
                        textAlign: 'center'
                    }, {
                        text: '个人考勤情况',
                        subtext: '总计 ' + Object.keys(builderJson).reduce(function (all, key) {
                            return all + builderJson[key];
                        }, 0),
                        subtextStyle:{
                            fontSize:18
                        },
                        textStyle:{
                            fontSize:20
                        },
                        x: '75%',
                        textAlign: 'center'
                    }],
                    grid: [{
                        top: 50,
                        width: '50%',
                        bottom: '55%',
                        left: 10,
                        containLabel: true
                    },{
                        top: '50%',
                        width: '50%',
                        bottom: 0,
                        left: 10,
                        containLabel: false
                    }],
                    xAxis: [{
                        type: 'value',
                        max: Object.keys(builderJson).reduce(function (all, key) {
                            return all + builderJson[key];
                        }, 0),
                        splitLine: {
                            show: false
                        },
                        axisLabel:{
                            textStyle : {
                                fontFamily : '微软雅黑',
                                fontSize : 18
                            }
                        },
                        show:false
                    },{
                        gridIndex:1,
                        axisLabel: {show: false},
                        axisLine: {show: false},
                        splitLine: {show: false},
                        axisTick: {show: false},
                        x:'25%',
                        y:'75%',
                        min: -1,
                        max: 1
                    }],
                    yAxis: [{
                        type: 'category',
                        data: Object.keys(builderJson),
                        axisLabel: {
                            interval: 0,
                            rotate: 30,
                            textStyle : {
                                fontFamily : '微软雅黑',
                                fontSize : 18
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    },{
                        gridIndex:1,
                        axisLabel: {show: false},
                        axisLine: {show: false},
                        splitLine: {show: false},
                        axisTick: {show: false},
                        min: -1,
                        max: 1
                    }],
                    series: [{
                        type: 'bar',
                        stack: 'chart',
                        z: 3,
                        label: {
                            normal: {
                                position: 'right',
                                show: true,
                                textStyle : {
                                    fontFamily : '微软雅黑',
                                    fontSize : 15,
                                    fontWeight : 'bolder'
                                }
                            }
                        },
                        data: Object.keys(builderJson).map(function (key) {
                            return builderJson[key];
                        })
                    },/*{
                        type: 'scatter',
                        xAxisIndex:1,
                        yAxisIndex:1,
                        data: [[0,0]],
                        symbolSize: 1,
                        label: {
                            normal: {
                                show: true,
                                formatter: memo.join('\n'),
                                padding: 10,
                                color: '#000',
                                fontSize: 20,
                                lineHeight: 30,
                                rich: {
                                    red: {
                                        color: 'red',
                                        fontSize:20
                                    },
                                    blue: {
                                        color: 'blue',
                                        fontSize:20
                                    },
                                    green: {
                                        color: 'green',
                                        fontSize:20
                                    }
                                }
                            }
                        }
                    }*/,{
                        type: 'pie',
                        show: true,
                        position: 'inside',
                        formatter: '{d}%',
                        radius: [0, '30%'],
                        startAngle:45,
                        label: {
                            normal: {
                                show: true,
                                position: 'out',
                                formatter: '{b}:{c}人\r\n{d}%',//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比

                                textStyle : {
                                    align : 'center',
                                    baseline : 'middle',
                                    fontFamily : '微软雅黑',
                                    fontSize : 18,
                                    fontWeight : 'bolder'
                                }
                            },
                        },
                        center: ['75%', '25%'],
                        data: Object.keys(builderJson).map(function (key) {
                            return {
                                name: key.replace('.js', ''),
                                value: builderJson[key]
                            }
                        })
                    }]
                };

                myChart1.setOption(option);

            });

        }


        //测验
        function ceyan(data,margin=false,id){
            var myid = 'chart-'+id;

            var c_id = 'charts-';
            c_id += Math.floor(id/2);

            var m_style = '';
            if(margin == true){
                m_style = 'margin-top:50px;';
            }
            var html = '<div style="width:1000px;height:600px;margin:auto;'+m_style+'" class="row" id="'+myid+'">';
            //var div1 = document.createElement("div");
            //div1.setAttribute("id",myid);
            $('#'+c_id).append(html);

            $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},async:false});
            $.post('report/get_ceyan_stu',data,function(e){
                if(e.status < 0){
                    alert(e.message);
                }else{
                    var title = e.title;
                    var data = e.data;

                    var dom1 = document.getElementById(myid);
                    var myChart1 = echarts.init(dom1,'light');
                    option = {
                        title: {
                            text: '测试成绩变化'
                        },
                        tooltip: {
                        },
                        xAxis: {
                            data: title,
                        },
                        yAxis: {
                            splitLine: {
                                show: false
                            }
                        },
                        visualMap: {
                            top: 10,
                            right: 10,
                            show:false,
                            pieces: [{
                                gt: 0,
                                lte: 60,
                                color: '#096'
                            }, {
                                gt: 60,
                                lte: 70,
                                color: '#ffde33'
                            }, {
                                gt: 70,
                                lte: 80,
                                color: '#ff9933'
                            }, {
                                gt: 80,
                                lte: 90,
                                color: '#cc0033'
                            }, {
                                gt: 90,
                                lte: 100,
                                color: '#660099'
                            }],
                            outOfRange: {
                                color: '#999'
                            }
                        },
                        series: {
                            type: 'line',
                            data: data,
                            label:{
                                normal:{
                                    show:true
                                },
                            },
                            markLine: {
                                silent: true,
                                data: [{
                                    yAxis: 60
                                }, {
                                    yAxis: 70
                                }, {
                                    yAxis: 80
                                }, {
                                    yAxis: 90
                                }, {
                                    yAxis: 100
                                }]
                            }
                        }
                    };
                    if(data.length > 1){
                        option.dataZoom = {startValue:'',type:'slider'};
                    }
                    myChart1.setOption(option);
                }
            });
        }

        //家校
        function jiaxiao(data,margin=false,id){
            var myid = 'chart-'+id;

            var c_id = 'charts-';
            c_id += Math.floor(id/2);

            var m_style = '';
            if(margin == true){
                m_style = 'margin-top:50px;';
            }
            var html = '<div style="width:1000px;height:600px;margin:auto;'+m_style+'" class="row" id="'+myid+'">';
            //var div1 = document.createElement("div");
            //div1.setAttribute("id",myid);
            $('#'+c_id).append(html);

            $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},async:false});
            $.post('report/get_jiaxiao_stu',data,function(e){
                if(e.status < 0){
                    alert(e.message);
                }else{
                    var jsonData = e.json;
                    var title = e.title;
                    var data = e.data;
                    //var memo = e.data.memo;

                    var dom1 = document.getElementById(myid);
                    var myChart1 = echarts.init(dom1,'light');

                    option = {
                        tooltip: {},
                        title: [{
                            text: '个人家校次数',
                            subtext: '总计 ' + Object.keys(jsonData).reduce(function (all, key) {
                                return all + jsonData[key];
                            }, 0),
                            x: '25%',
                            textAlign: 'center'
                        }, {
                            text: '个人家校情况',
                            subtext: '总计 ' + Object.keys(jsonData).reduce(function (all, key) {
                                return all + jsonData[key];
                            }, 0),
                            x: '75%',
                            textAlign: 'center'
                        }, {
                            text: '个人家校成绩',
                            x: '75%',
                            y: '47%',
                            textAlign: 'center'
                        }],
                        grid: [{
                            top: 50,
                            width: '50%',
                            bottom: '50%',
                            left: 10,
                            containLabel: true
                        }, {
                            top: '55%',
                            width: '70%',
                            bottom: 0,
                            left: 100,
                            containLabel: true
                        }],
                        xAxis: [{
                            type: 'value',
                            splitLine: {
                                show: false
                            }
                        },{
                            gridIndex:1,
                            data: title,
                        }],
                        yAxis: [{
                            type: 'category',
                            data: Object.keys(jsonData),
                            axisLabel: {
                                interval: 0,
                                rotate: 30
                            },
                            splitLine: {
                                show: false
                            }
                        }, {
                            gridIndex:1,
                            splitLine: {
                                show: false
                            }
                        }],
                        visualMap: {
                            seriesIndex:1,
                            show:false,
                            top: 10,
                            right: 10,
                            pieces: [{
                                gt: 0,
                                lte: 50,
                                color: '#096'
                            }, {
                                gt: 50,
                                lte: 100,
                                color: '#ffde33'
                            }, {
                                gt: 100,
                                lte: 150,
                                color: '#ff9933'
                            }, {
                                gt: 150,
                                lte: 200,
                                color: '#cc0033'
                            }, {
                                gt: 200,
                                lte: 300,
                                color: '#660099'
                            }, {
                                gt: 300,
                                color: '#7e0023'
                            }],
                            outOfRange: {
                                color: '#999'
                            }
                        },
                        series: [{
                            type: 'bar',
                            stack: 'chart',
                            z: 3,
                            label: {
                                normal: {
                                    position: 'right',
                                    show: true
                                }
                            },
                            data: Object.keys(jsonData).map(function (key) {
                                return jsonData[key];
                            })
                        }, {
                            xAxisIndex:1,
                            yAxisIndex:1,
                            type: 'line',
                            data: data,
                            label:{
                                normal:{
                                    show:true
                                },
                            },
                            markLine: {
                                silent: true,
                                data: [{
                                    yAxis: 50
                                }, {
                                    yAxis: 100
                                }, {
                                    yAxis: 150
                                }, {
                                    yAxis: 200
                                }, {
                                    yAxis: 300
                                }]
                            }
                        }, {
                            type: 'pie',
                            radius: [0, '30%'],
                            center: ['75%', '25%'],
                            data: Object.keys(jsonData).map(function (key) {
                                return {
                                    name: key.replace('.js', ''),
                                    value: jsonData[key]
                                }
                            })
                        }]
                    };
                    if(data.length > 1){
                        option.dataZoom = {xAxisIndex:1,startValue:'',type:'slider'};
                    }

                    myChart1.setOption(option);

                }
            });
        }

        //作业
        function zuoye(data,margin=false,id){
            var myid = 'chart-'+id;

            var c_id = 'charts-';
            c_id += Math.floor(id/2);
            var m_style = '';
            if(margin == true){
                m_style = 'margin-top:50px;';
            }
            var html = '<div style="width:1000px;height:600px;margin:auto;'+m_style+'" class="row" id="'+myid+'">';
            //var div1 = document.createElement("div");
            //div1.setAttribute("id",myid);
            $('#'+c_id).append(html);

            $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},async:false});
            $.post('report/get_zuoye_stu',data,function(e){
                if(e.status < 0){
                    alert(e.message);
                }else{
                    var jsonData = e.json;
                    var title = e.title;
                    var data = e.data;
                    //var memo = e.data.memo;

                    var dom1 = document.getElementById(myid);
                    var myChart1 = echarts.init(dom1,'light');

                    option = {
                        tooltip: {},
                        title: [{
                            text: '个人作业次数',
                            subtext: '总计 ' + Object.keys(jsonData).reduce(function (all, key) {
                                return all + jsonData[key];
                            }, 0),
                            x: '25%',
                            textAlign: 'center'
                        }, {
                            text: '个人作业情况',
                            subtext: '总计 ' + Object.keys(jsonData).reduce(function (all, key) {
                                return all + jsonData[key];
                            }, 0),
                            x: '75%',
                            textAlign: 'center'
                        }, {
                            text: '个人作业成绩',
                            x: '75%',
                            y: '47%',
                            textAlign: 'center'
                        }],
                        grid: [{
                            top: 50,
                            width: '50%',
                            bottom: '50%',
                            left: 10,
                            containLabel: true
                        }, {
                            top: '55%',
                            width: '70%',
                            bottom: 0,
                            left: 100,
                            containLabel: true
                        }],
                        xAxis: [{
                            type: 'value',
                            splitLine: {
                                show: false
                            }
                        },{
                            gridIndex:1,
                            data: title,
                        }],
                        yAxis: [{
                            type: 'category',
                            data: Object.keys(jsonData),
                            axisLabel: {
                                interval: 0,
                                rotate: 30
                            },
                            splitLine: {
                                show: false
                            }
                        }, {
                            gridIndex:1,
                            splitLine: {
                                show: false
                            }
                        }],
                        visualMap: {
                            seriesIndex:1,
                            show:false,
                            top: 10,
                            right: 10,
                            pieces: [{
                                gt: 0,
                                lte: 50,
                                color: '#096'
                            }, {
                                gt: 50,
                                lte: 100,
                                color: '#ffde33'
                            }, {
                                gt: 100,
                                lte: 150,
                                color: '#ff9933'
                            }, {
                                gt: 150,
                                lte: 200,
                                color: '#cc0033'
                            }, {
                                gt: 200,
                                lte: 300,
                                color: '#660099'
                            }, {
                                gt: 300,
                                color: '#7e0023'
                            }],
                            outOfRange: {
                                color: '#999'
                            }
                        },
                        series: [{
                            type: 'bar',
                            stack: 'chart',
                            z: 3,
                            label: {
                                normal: {
                                    position: 'right',
                                    show: true
                                }
                            },
                            data: Object.keys(jsonData).map(function (key) {
                                return jsonData[key];
                            })
                        }, {
                            xAxisIndex:1,
                            yAxisIndex:1,
                            type: 'line',
                            data: data,
                            label:{
                                normal:{
                                    show:true
                                },
                            },
                            markLine: {
                                silent: true,
                                data: [{
                                    yAxis: 50
                                }, {
                                    yAxis: 100
                                }, {
                                    yAxis: 150
                                }, {
                                    yAxis: 200
                                }, {
                                    yAxis: 300
                                }]
                            }
                        }, {
                            type: 'pie',
                            radius: [0, '30%'],
                            center: ['75%', '25%'],
                            data: Object.keys(jsonData).map(function (key) {
                                return {
                                    name: key.replace('.js', ''),
                                    value: jsonData[key]
                                }
                            })
                        }]
                    };
                    if(data.length > 1){
                        option.dataZoom = {xAxisIndex:1,startValue:'',type:'slider'};
                    }

                    myChart1.setOption(option);

                }
            });
        }


        function dealImage(base64, w,callback) {
            var newImage = new Image();
            var quality = 0.8;    //压缩系数0-1之间
            newImage.src = base64;
            newImage.setAttribute("crossOrigin", 'Anonymous');	//url为外域时需要
            var imgWidth, imgHeight;
            newImage.onload = function () {
                imgWidth = this.width;
                imgHeight = this.height;
                var canvas = document.createElement("canvas");
                var ctx = canvas.getContext("2d");
                if (Math.max(imgWidth, imgHeight) > w) {
                    if (imgWidth > imgHeight) {
                        canvas.width = w * 3;
                        canvas.height = w * imgHeight / imgWidth *3;
                    } else {
                        canvas.height = w*3;
                        canvas.width = w * imgWidth / imgHeight *3;
                    }
                } else {
                    canvas.width = imgWidth*3;
                    canvas.height = imgHeight*3;
                    quality = 0.8;
                }
                ctx.fillStyle = '#fff';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
                var base64_new = canvas.toDataURL("image/jpeg", quality); //压缩语句
                // 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间，请加以下语句，quality初始值根据情况自定
                // while (base64.length / 1024 > 150) {
                // 	quality -= 0.01;
                // 	base64 = canvas.toDataURL("image/jpeg", quality);
                // }
                // 防止最后一次压缩低于最低尺寸，只要quality递减合理，无需考虑
                // while (base64.length / 1024 < 50) {
                // 	quality += 0.001;
                // 	base64 = canvas.toDataURL("image/jpeg", quality);
                // }
                callback(base64_new);
            }
        }

        function put_arr(base64){
            urlArr.push(base64);
        }
    </script>
</div>

<div class="box box-body" id="chart_container" style="width:1200px;padding-left:0;padding-right:0;padding-bottom: 0;">

</div>

<script type="text/javascript">
</script>